<template>
  <div class="scatter">
    <div class="bubble_min bubble1"></div>
    <div class="bubble_min bubble2"></div>
    <div class="bubble_min bubble3"></div>
    <div class="bubble_min bubble4"></div>
    <div class="bubble_min bubble2"></div>
    <div class="bubble_min bubble2"></div>
    <div class="bubble_min bubble2"></div>
    <div class="bubble_min bubble2"></div>
    <div class="bubble_min bubble2"></div>
    <div class="bubble_min bubble2"></div>
    <div class="bubble_min bubble2"></div>
    <div class="bubble_min bubble3"></div>
    <div class="bubble_min bubble2"></div>
    <div class="bubble_min bubble4"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'

interface Point {
  (a: number, b: number, c: number, d: number): number[]
}

type offset = number[][] | number[]

const bubbleData = reactive([])

const getPoint: Point = (r, ox, oy, n) => {
  let point = []
  let radians = (Math.PI / 180) * Math.round(360 / n)
  for (let i = 0; i < n; i++) {
    let x = ox + r * Math.sin(radians * i),
      y = oy + r * Math.cos(radians * i)
    const width = Math.floor(x) <= 0 ? 3 : Math.floor(x)
    point.unshift([width, Math.floor(y)])
  }
  return point
}
// 初始化气泡图
const initScatter = () => {
  let offsets: offset
  //气泡位置，只有一个时显示在中间，较多时围成一个圆
  offsets = getPoint(10, 10, 10, 15)
  offsets.forEach((v) => {
    // v.width = v.value + Math.ceil(v.value / (v.value + 1)) * 20
    const top = Math.floor(Math.random() * 150)
    const left = Math.floor(Math.random() * 200)
    bubbleData.push({
      top,
      left,
      width: v[0],
      time: v[1] > 50 ? (v[1] % 6) + 10 : (v[1] % 6) + 6,
    })
  })
}

onMounted(() => {
  initScatter()
})
</script>

<style scoped lang="less">
.scatter {
  width: 100%;
  position: relative;
  height: 100%;
  .bubble_min:nth-child(5) {
    width: 10px;
    height: 10px;
    top: 25px;
    left: 40px;
    animation-duration: 12s;
  }
  .bubble_min:nth-child(6) {
    width: 4px;
    height: 4px;
    animation-duration: 10s;
    top: 50px;
    left: 80px;
  }
  .bubble_min:nth-child(7) {
    width: 4px;
    height: 4px;
    top: 90px;
    left: 18px;
  }
  .bubble_min:nth-child(8) {
    width: 5px;
    height: 5px;
    top: 25px;
    left: 288px;
    animation-name: itemfloat;
  }
  .bubble_min:nth-child(9) {
    width: 11px;
    height: 11px;
    top: 110px;
    animation-duration: 11s;
    left: 240px;
    animation-name: itemfloat;
  }
  .bubble_min:nth-child(10) {
    width: 14px;
    height: 14px;
    top: 110px;
    animation-duration: 13s;
    left: 198px;
    animation-name: minibubble4;
  }
  .bubble_min {
    background-color: #fdfdfd;
    box-shadow: inset 0 0 25px rgba(222, 251, 251, 0.25);
    border-radius: 50%;
    position: absolute;
    z-index: 0;
    opacity: 0.5;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
  }

  .bubble1 {
    animation-duration: 8s;
  }

  .bubble2 {
    animation-duration: 7s;
    width: 5px;
    height: 5px;
    animation-name: minibubble2;
    top: 30px;
    left: 120px;
  }

  .bubble3 {
    animation-duration: 8s;
    width: 4px;
    height: 4px;
    animation-name: minibubble3;
    top: 90px;
    left: 18px;
  }

  .bubble4 {
    width: 13px;
    height: 13px;
    animation-duration: 8s;
    animation-name: minibubble2;
    top: 32px;
    left: 300px;
  }

  @keyframes minibubble2 {
    0% {
      transform: translateY(20px) rotate(0deg);
    }
    100% {
      transform: translateY(-40px) rotate(1500deg);
    }
  }
  @keyframes minibubble3 {
    0% {
      transform: translateY(20px) rotate(0deg);
    }
    100% {
      transform: translateY(-90px) rotate(1500deg);
    }
  }
  @keyframes minibubble4 {
    0% {
      transform: translateY(20px) rotate(0deg);
    }
    100% {
      transform: translateY(-110px) rotate(1500deg);
    }
  }
  @keyframes minibubble {
    0% {
      transform: translateY(20px) rotate(0deg);
    }
    100% {
      transform: translateY(-100px) rotate(1500deg);
    }
  }
}
@keyframes itemfloat {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-35px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>